<template>
  <div class="report_simple">
    <template v-if="reports.length === 0" class="empty"> 暂无测试报告记录。</template>
    <template v-else>
      <div class="report-list">
        <div v-for="report in reports" :key="report.id" class="report-card">
          <div class="report-header">
            <h4>{{ report.case_name }}</h4>
            <span :class="`status ${report.report_actual_status.toLowerCase()}`">{{
              report.report_actual_status
            }}</span>
          </div>
          <div class="report-details">
            <p><strong>URL:</strong> {{ report.case_url }}</p>
            <p><strong>方法:</strong> {{ report.case_method }}</p>
            <p><strong>期望状态:</strong> {{ report.case_expected_status }}</p>
            <p><strong>实际状态:</strong> {{ report.actual_status }}</p>
            <p><strong>执行时间:</strong> {{ new Date(report.executed_at).toLocaleString() }}</p>
            <p><strong>耗时:</strong> {{ report.durations.toFixed(2) }} 秒</p>
          </div>
          <div v-if="report.actual_response" class="response-section">
            <h5>实际响应:</h5>
            <pre>{{ JSON.stringify(report.actual_response, null, 2) }}</pre>
          </div>
          <div v-if="report.log" class="log-section">
            <h5>执行日志:</h5>
            <pre>{{ report.log }}</pre>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/services/api'

const reports = ref([])

const fetchReports = async () => {
  try {
    // 这里假设后端有一个 /test-reports/ 的端点
    // 如果没有，需要在 Django 中创建 TestReportViewSet
    const res = await api.get('test-reports/')
    // reports.value = res.data
    reports.value = res.data.results.filter((item) => item && item.id)
    console.log(reports.value)
  } catch (error) {
    // 如果没有报告 API，可以先从用例的 reports 关联获取
    const casesRes = await api.get('test-cases/?include_reports=true')
    const allReports = []
    casesRes.data.forEach((caseItem) => {
      if (caseItem.reports && caseItem.reports.length > 0) {
        caseItem.reports.forEach((r) => {
          r.case = caseItem // 关联用例信息
          allReports.push(r)
        })
      }
    })
    reports.value = allReports.sort((a, b) => new Date(b.executed_at) - new Date(a.executed_at))
  }
}

onMounted(() => {
  fetchReports()
})
</script>

<style lang="less" scoped>
.report-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.report-container h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.empty {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 40px 0;
}

.report-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.report-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #dee2e6;
}

.report-header h4 {
  margin: 0;
  color: #333;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.status.pass {
  background-color: #d4edda;
  color: #155724;
}

.status.fail {
  background-color: #f8d7da;
  color: #721c24;
}

.status.error {
  background-color: #f9dede;
  color: #843534;
}

.report-details {
  padding: 15px 20px;
  line-height: 1.6;
  color: #555;
  border-bottom: 1px dashed #dee2e6;
}

.response-section,
.log-section {
  padding: 15px 20px;
}

.response-section h5,
.log-section h5 {
  margin-top: 0;
  color: #333;
  font-size: 16px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #333;
  margin: 0;
}
</style>
